<template>
  <div>
    <div class="place"><span>用户定位的地址</span></div>
    <!-- 顶部搜索栏 -->

    <van-search
      v-model="search"
      placeholder="搜索"
      shape="round"
      right-icon="https://information-system.oss-cn-beijing.aliyuncs.com/6cee0e35-31e7-4420-a983-359c9bc0cb7f.png"
      @search="onSearch"
      @clear="onClear"
      @focus="toSearch"
    >
    </van-search>
    <!-- 商家分类 -->
    <van-swipe>
      <van-swipe-item v-for="(page, index) in pages" :key="index">
        <van-grid :column-num="4" :border="false">
          <van-grid-item
            v-for="category in page"
            :key="category.name"
            :text="category.name"
            @click="onCategoryClick(category)"
          >
            <!-- 使用默认插槽自定义图标 -->
            <template #icon>
              <img
                :src="category.image"
                :alt="category.name"
                style="width: 60px; height: 60px; display: block"
              />
            </template>
          </van-grid-item>
        </van-grid>
      </van-swipe-item>
      <!-- 商家分类分页指示器的颜色 -->
      <template #indicator="{ active, total }">
        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
      </template>
    </van-swipe>
    <!-- 今日热榜 -->
    <div class="today-benefits">
      <h2>美食top榜前3</h2>

      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="product in products" :key="product.id">
          <van-card
            :key="product.name"
            :thumb="product.avatar"
            @click="onMerchantClick(product)"
          >
            <!-- 添加起送费和配送费等自定义内容-->

            <template #tags>
              <div class="title-merchants">
                <h3 style="margin-top: 5px; margin-bottom: 8px">
                  {{ product.storeName }}
                </h3>
              </div>
              <div class="description-class">
                <span class="between-innerSpan">
                  <span
                    ><van-tag plain type="primary"
                      >{{ product.score }}分
                    </van-tag></span
                  >
                  <span>
                    <van-tag plain type="primary"
                      >月售{{ product.monthSale }}</van-tag
                    ></span
                  >
                </span>
                <span class="between-innerSpan">
                  <span
                    ><van-tag plain type="primary"
                      >{{ estimateDeliveryTime }}分钟
                    </van-tag></span
                  >
                  <span>
                    <van-tag plain type="primary"
                      >{{ deliveryDistance }}km</van-tag
                    ></span
                  >
                </span>
              </div>
              <div class="merchant-info">
                <van-tag plain type="primary"
                  >起送费: ¥{{ product.minimumDeliveryFee }}
                </van-tag>
                <van-tag plain type="primary"
                  >配送费: ¥{{ product.deliveryFee }}</van-tag
                >
              </div>
            </template>
          </van-card>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 推荐商家 -->
    <div class="recommended-merchants">
      <h2>推荐商家</h2>
      <van-card
        v-for="merchant in merchants"
        :key="merchant.name"
        :thumb="merchant.avatar"
        @click="onMerchantClick(merchant)"
      >
        <!-- 添加起送费和配送费等自定义内容-->

        <template #tags>
          <div class="title-merchants">
            <h3 style="margin-top: 5px; margin-bottom: 8px">
              {{ merchant.storeName }}
            </h3>
          </div>
          <div class="description-class">
            <span class="between-innerSpan">
              <span
                ><van-tag plain type="primary"
                  >{{ merchant.score }}分
                </van-tag></span
              >
              <span>
                <van-tag plain type="primary"
                  >月售{{ merchant.monthSale }}</van-tag
                ></span
              >
            </span>
            <span class="between-innerSpan">
              <span
                ><van-tag plain type="primary"
                  >{{ estimateDeliveryTime }}分钟
                </van-tag></span
              >
              <span>
                <van-tag plain type="primary"
                  >{{ deliveryDistance }}km</van-tag
                ></span
              >
            </span>
          </div>
          <div class="merchant-info">
            <van-tag plain type="primary"
              >起送费: ¥{{ merchant.minimumDeliveryFee }}
            </van-tag>
            <van-tag plain type="primary"
              >配送费: ¥{{ merchant.deliveryFee }}</van-tag
            >
          </div>
        </template>
      </van-card>
    </div>
    <footer-view></footer-view>
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import http from "../../utils/http"; // 确保路径正确
import { useRouter } from "vue-router";
import FooterView from "../footer/FooterView.vue";

const router = useRouter();
const search = ref("");

//路由到搜索界面
const toSearch = () => {
  router.push({
    path: "/search",
    query: { merchants: JSON.stringify(merchants.value) },
  });
};
const itemsPerPage = 8; //每一页的项目数量
const pages = computed(() => {
  const pages = [];
  for (let i = 0; i < categories.value.length; i += itemsPerPage) {
    pages.push(categories.value.slice(i, i + itemsPerPage));
  }
  return pages;
});
const onSwiperChange = (index) => {
  // 当滑动切换时，可以在这里处理一些逻辑，例如记录当前页
  console.log("当前的页面为:", index);
};
const getStoreClass = async () => {
  // console.log("商铺分类的函数被执行");
  try {
    const response = await http.get("/StoreClass/getStoreClass");
    categories.value = response.data.data;
    return response.data.data;
  } catch (error) {
    console.error(error);
  }
};
const getBusinesses = async () => {
  // console.log("查询商家的函数被执行");
  try {
    const response = await http.get("/business/getAllBusinesses");
    merchants.value = response.data.data;
    //将merchants中月售(属性名为monthSale)前三的商家赋值给(const products = ref([]); //top榜的商家)
    // 排序并获取月售前三的商家
    products.value = merchants.value
      .sort((a, b) => b.monthSale - a.monthSale) // 降序排序
      .slice(0, 3); // 取前三名
    return response.data.data;
  } catch (error) {
    console.error(error);
  }
};
onMounted(() => {
  //请求所有的店铺分类
  getStoreClass();
  //请求所有的商家
  getBusinesses();
});
const categories = ref([]); //店铺分类
const products = ref([]); //top榜的商家
const merchants = ref([]); //商家列表
const deliveryFee = ref(0); //配送费
const deliveryDistance = ref(1.2); //配送距离
const estimateDeliveryTime = ref(40); //预计配送时间
const onSearch = (value) => {
  console.log("搜索:", value);
};
const onClear = () => {
  console.log("清除搜索");
};
const onCategoryClick = (category) => {
  //1.路由到分类的页面
  console.log("点击分类:", category.name);
  router.push({
    path: "/class-business",
    query: {
      classId: category.classId,
      className: category.name,
    },
  });
};
const onMerchantClick = (merchant) => {
  console.log("点击商家:店铺名为", merchant.storeName);
  router.push({
    path: "/business",
    query: {
      merchantId: merchant.businessId,
    },
  });
};
</script>

<style scoped>
.today-benefits,
.recommended-merchants {
  margin: 16px;
}
.merchant-info {
  display: flex;
  /* justify-content: space-between; */
  font-size: 12px;
  color: #888;
  margin-top: 6px; /* 添加一些顶部间距 */
  gap: 8px; /* 这里的 8px 是两个标签之间的间隙大小，可以根据需要调整 */
}
/* 定位地址 */
.place {
  margin: 16px;
  position: sticky;
  z-index: 10;
}

/* 确保搜索栏在place下面 */
.van-search {
  position: sticky;
  top: 0px; /* 假设place的高度大约为50px */
  background-color: #238dc2;
  z-index: 10;
  padding: 10px;
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}
.between-innerSpan span {
  display: inline-block; /* 使span表现为块级元素，这样margin才能生效 */
  margin-right: 8px; /* 设置右边距 */
}

.between-innerSpan span:last-child {
  margin-right: 0; /* 移除最后一个span的右边距 */
}
.between-span span {
  display: inline-block; /* 使span表现为块级元素，这样margin才能生效 */
  margin-right: 50px; /* 设置右边距 */
}

.between-span span:last-child {
  margin-right: 0; /* 移除最后一个span的右边距 */
}

.description-class {
  display: flex;
  justify-content: space-between; /* 将两个span元素分别放置在div的两端 */
  align-items: center; /* 垂直居中对齐 */
  margin-top: 5px;
}

/* .description-class span:first-child {
  margin-right: 8px; /* 为第一个span添加右边距，以创建间隙
}  */
.title-merchants {
  margin: 2px;
}
/* 轮播图的卡片设置 */
.my-swipe .van-swipe-item {
  /* color: #fff; */
  font-size: 50px;
  /* line-height: 120px; */
  /* text-align: center; */
  /* background-color: #39a9ed; */
}
/* 商品分类分页 */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
/* 商品左右分页的样式 */
.category-swiper {
  width: 100%;
  height: 100%;
}
/* 自定义店铺分类指示器 */
.custom-indicator {
  /* position: absolute; */
  right: 5px;
  bottom: -5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(91, 182, 218, 0.1);
  /* 新增的居中样式 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* 确保文本居中 */
}
</style>